<template>
    <div class="params_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="10">
                <i class="el-icon-shopping-bag-1"></i>
            </el-col>
            <el-col :span="3">
                <h1>商品参数</h1>
            </el-col>
        </el-row>
        <el-row type="flex" align="middle">
            <el-col :span="22" :offset="1">
                <el-form>
                    <el-form-item :label="' \0 \0 \0 商品分类名称 \0 '">
                        <el-cascader
                            size="small"
                            clearable
                            v-model="chooseGoodsParams"
                            :options="goodsParamsList"
                            :props="cascaderProps"
                            @change="changeGoodsParams"
                            style="width:15vw"
                        >
                        </el-cascader>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1">
                <el-tabs v-model="chooseStaticOrDynamic" @tab-click="changeGoodsParams" tabPosition="left">
                    <el-tab-pane name="only" :disabled="!showTagsCard">
                        <span slot="label"><i class="el-icon-price-tag"></i> 静态属性</span>
                        <paramsStatic
                            :childGetCateParamsList="getCateStaticParamsList"
                            :childCateParamsID="CateParamsID"
                            @reFreshTable="changeGoodsParams"
                            v-show="showTagsCard"
                        >
                        </paramsStatic>
                    </el-tab-pane>
                    <el-tab-pane name="many" :disabled="!showTagsCard">
                        <span slot="label"><i class="el-icon-discount"></i> 动态参数</span>
                        <paramsDynamic
                            :childGetCateParamsList="getCateDynamicParamsList"
                            :childCateParamsID="CateParamsID"
                            @reFreshTable="changeGoodsParams"
                            v-show="showTagsCard"
                        >
                        </paramsDynamic>
                    </el-tab-pane>
                    <el-empty
                        image="https://www.gstatic.com/android/keyboard/emojikitchen/20211115/u1f381/u1f381_u1f4f0.png"
                        description="请选择第三级商品分类"
                        v-show="!showTagsCard"
                    >
                    </el-empty>
                </el-tabs>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1" style="margin-top: 14px">
                <hr/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="17" class="bottomBlock">
                <i class="el-icon-warning" style="color:#ffce44"></i>
                &nbsp;&nbsp;
                <p class="bottomText">注：只允许为第三级商品分类设置相关参数</p>
            </el-col>            
        </el-row>
    </div>
</template>

<script>
import paramsStatic from '@/components/goods/goodsParamsStatic'
import paramsDynamic from '@/components/goods/goodsParamsDynamic'

export default({
    name:'goodsparams',
    components:{
        paramsStatic,
        paramsDynamic
    },
    data(){
        return{
            goodsParamsList:[],
            showTagsCard:false,
            chooseGoodsParams:[],
            cascaderProps:{
                value: 'cat_id',
                label:'cat_name',
                children: 'children',
                expandTrigger:'hover',
            },
            chooseStaticOrDynamic:'only',
            getCateStaticParamsList:[],
            getCateDynamicParamsList:[],
            CateParamsID:0,
        }
    },
    created(){
        this.getgoodsParamsList();
    },
    methods:{
        async getgoodsParamsList(){
            const { data: res } = await this.$http.get('categories',{params:{type: 3}});
            if(res.meta.status == 200){
                this.goodsParamsList = res.data;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取商品父类失败！'
                    }
                )
            }
        },
        async changeGoodsParams(){
            if(this.chooseGoodsParams.length == 0){
                this.showTagsCard = false;
            }else if(this.chooseGoodsParams.length == 2 || this.chooseGoodsParams.length == 1){
                this.chooseGoodsParams = [];
                this.showTagsCard = false;
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'warning',
                        duration:2000,
                        message: '仅能选择第三级商品分类!请重选！'
                    }
                )
            }else if(this.chooseGoodsParams.length == 3){
                this.showTagsCard = true;
                this.CateParamsID = this.chooseGoodsParams[this.chooseGoodsParams.length - 1];
                const { data: res} = await this.$http.get(`categories/${this.CateParamsID}/attributes`,
                    {params:{sel: this.chooseStaticOrDynamic}}
                );
                if(res.meta.status == 200){
                    //循环遍历修改属性并添加属性
                    res.data.forEach(item => {
                        item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : [];
                        this.$set(item,'inputVisible',false);
                        this.$set(item,'inputValue','');
                    });
                    if(this.chooseStaticOrDynamic == 'only'){
                        this.getCateStaticParamsList= res.data
                    }else if(this.chooseStaticOrDynamic == 'many'){
                        this.getCateDynamicParamsList= res.data
                    }
                }else{
                    if(this.chooseGoodsParams.length != 0){
                        if(this.chooseStaticOrDynamic == 'only'){
                            return this.$message(
                                {
                                    center:true,
                                    showClose: true,
                                    type: 'error',
                                    duration:2000,
                                    message: '获取静态属性列表失败'
                                }
                            )
                        }else if(this.chooseStaticOrDynamic == 'many'){
                            return this.$message(
                                {
                                    center:true,
                                    showClose: true,
                                    type: 'error',
                                    duration:2000,
                                    message: '获取动态参数列表失败'
                                }
                            )
                        }
                    }
                }
            }else{
                this.CateParamsID = null;
            }
            
        },
    }
})
</script>

<style lang="less"scoped>
    .params_container{
        width: 80vw;
        background-color: #fff;
        padding:8px;
        margin:4vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        hr{
            background-color: #2495e7;
            height: 1px;
        }
        .bottomBlock{
            display: flex;
            align-items: center;
            .bottomText{
            font-size: 14px;
            font-weight: bold;
            }
        }
    }
</style>